<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>

    <!--样式初始化-->
    <link rel="stylesheet" href="/static/css/common.css">
    <!--映入外部css文件-->
    <link rel="stylesheet" href="/static/css/index.css">

</head>
<body>
<!--1.网站头部-->
<div class="header">
    <!--1.1网站导航-->
    <div class="site-nav">

        <!--版心-->
        <div class="w">
            <!--导航-->
            <ul class="nav">
                <li><a href="#">小米官网</a></li>
                <li><a href="#">小米商城</a></li>
                <li><a href="#">MIUI</a></li>
                <li><a href="#">IoT</a></li>
                <li><a href="#">云服务</a></li>
                <li><a href="#">天心数科</a></li>
                <li><a href="#">有品</a></li>
                <li><a href="#">小爱开放平台</a></li>
                <li><a href="#">请问请问</a></li>
                <li><a href="#">企业团购</a></li>
                <li><a href="#">资质证照</a></li>
                <li><a href="#">协议规则</a></li>
                <li><a href="#">下载app</a></li>
                <li><a href="#">Select Location</a></li>
            </ul>

            <!--购物车-->
            <div class="cart">
                <a href="#">购物车(0)</a>
            </div>

            <!--登录注册-->
            <ul class="login">
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">消息通知</a></li>
            </ul>
        </div>
    </div>

    <!--2.2网站头部-->
    <!-- 1.2 网站头部 -->
    <div class="site-top w"><!--通栏+版心：元素在版心内往往是水平垂直居中的-->
        <!-- logo -->
        <div class="logo">
            <img src="/static/images/logo.png" alt="logo">
        </div>
        <!-- 导航 -->
        <ul class="nav">
            <li><a href="#">Xiaomi手机</a></li>
            <li><a href="#">Redmi手机</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">家电</a></li>
            <li><a href="#">路由器</a></li>
            <li><a href="#">服务中心</a></li>
            <li><a href="#">社区</a></li>
        </ul>
        <!-- 搜索框 -->
        <div class="search">
            <input class="txt" type="text">
            <button class="btn">登录</button>
        </div>
    </div>
</div>
<!-- 2. banner -->
<div class="banner w">
    <!-- 2.1 轮播图 -->
    <div class="swiper">
        <ul>
            <li><a href="#"><img src="/static/upload/home-wifi.webp" alt=""></a></li>
            <li><a href="#"><img src="/static/upload/home-wifi.webp" alt=""></a></li>
            <li><a href="#"><img src="/static/upload/home-wifi.webp" alt=""></a></li>
        </ul>
    </div>
    <!-- 2.2 侧边栏 -->
    <div class="sidebar">
        <ul class="list">
            <li><a href="#">手机 <span>></span></a></li>
            <li><a href="#">电视 <span>></span></a></li>
            <li><a href="#">笔记本 平板 <span>></span></a></li>
            <li><a href="#">出行 穿戴 <span>></span></a></li>
            <li><a href="#">耳机 音箱 <span>></span></a></li>
            <li><a href="#">家电 <span>></span></a></li>
            <li><a href="#">智能 路由器 <span>></span></a></li>
            <li><a href="#">电源 配件 <span>></span></a></li>
            <li><a href="#">健康 儿童 <span>></span></a></li>
            <li><a href="#">生活 箱包 <span>></span></a></li>
        </ul>
    </div>
    <!-- 2.3 banner中最后一行 -->
    <div class="row">
        <!-- 第一列 -->
        <div class="col1">
            <ul>
                <li>
                    <a href="#">
                        <img src="/static/images/icon1.png" alt="">
                        <p>保障服务</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/static/images/icon2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/static/images/icon2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/static/images/icon2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/static/images/icon2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="/static/images/icon2.png" alt="">
                        <p>企业团购</p>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 第二列 -->
        <div class="col2">
            <ul>
                <li><img src="/static/upload/pro1.jpg" alt=""></li>
                <li><img src="/static/upload/pro2.jpg" alt=""></li>
                <li><img src="/static/upload/pro3.jpg" alt=""></li>
            </ul>
        </div>
    </div>

    </div>

<!-- 3. 主内容区域 -->
<div class="main">
    <!-- 版心 -->
    <div class="w">
        <!-- 3.1 第一个大图 -->
        <div class="main-banner">
            <img src="/static/upload/main-banner.webp" alt="">
        </div>
        <!-- 3.2 手机商品 -->
        <!--他的子元素使用了浮动，而版心后面还有其他的，商品，为了避免给其他商品带来灾难，使用清除浮动-->
        <div class="phone clearfix">
            <!-- 头 -->
            <!--他在css中使用了浮动，故他不会撑起父元素phone 的高度，需要使用清除浮动，给后面的box-body带来灾难-->
            <div class="box-hd clearfix">
                <h3>手机</h3>
                <div class="link">
                    <a href="#">查看更多...</a>
                </div>
            </div>
            <!-- 身体 -->
            <div class="box-body">
                <div class="col1">
                    <img src="/static/upload/phone-col1.webp" alt="">
                </div>
                <div class="col2">
                    <ul>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                        <li>
                            <img src="/static/upload/phone1.webp" alt="">
                            <h3 class="title">Xiaomi 12S Ultra</h3>
                            <p class="desc">这真徕卡 | 专业徕卡影像</p>
                            <p class="price">5999元起</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>